<template>
  <div>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
          @keyup="jianpan"
          v-model="val"
        />
      </section>
    </header>
    <section>
      <h2>正在进行 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <li v-for="(value, index) in arr" :key="index">
          <span
            @click="pdwz(index)"
            v-bind="bool"
            v-html="value.shurukuang"
          ></span>
          <span>{{ value.zhi }}</span>
          <span @click="shan(index)">删除</span>
        </li>
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist">
        <li v-for="(value, index) in arrNew" :key="index">
          <span @click="pdwz2(index)" v-html="value.shurukuang"></span>
          <span>{{ value.zhi }}</span>
          <span @click="shan2(index)">删除</span>
        </li>
      </ul>
    </section>
    <footer></footer>
  </div>
</template>
<style>
</style>
<script>
export default {
  data() {
    return {
      arr: [],
      val: "",
      input: "<input type='checkbox'>",
      arrNew: [],
      bool: false,
    };
  },
  methods: {
    jianpan(e) {
      if (e.keyCode == 13) {
        this.arr.push({
          shurukuang: this.input,
          zhi: this.val,
          checked: false,
        });
      }
    },
    shan(index) {
      console.log(index);
      this.arr.splice(index, 1);
    },
    pdwz(index) {
      this.bool = true;
      this.arr.splice(index, 1);
      if (this.bool) {
        this.arrNew.push({
          shurukuang: this.input,
          zhi: this.val,
          checked: true,
        });
        this.bool = false;
      } else {
        this.arrNew.splice(index, 1);
      }
    },
    shan2(index) {
      this.arrNew.splice(index, 1);
    },
    pdwz2(index) {
      this.bool = true;
      this.arrNew.splice(index, 1);
      if (this.bool) {
        this.arr.push({
          shurukuang: this.input,
          zhi: this.val,
          checked: true,
        });
        this.bool = false;
      } else {
        this.arrNew.splice(index, 1);
      }
    },
  },
};
</script>
